{% extends 'base.html' %}

{% block title %}注册{% endblock %}
{% block head %}
    <script src="{% static 'js/jquery-3.7.1.min.js' %}"></script>
    <script src="{% static 'js/sendEmailBtn.js' %}"></script>
{% endblock %}

{% block main %}
    <main class="container d-flex justify-content-center align-items-center vh-50">
        <div class="col-md-6 col-lg-4">
            <form class="bg-white p-4 rounded shadow" method="post">
                {% csrf_token %}
                <h2 class="text-center mb-4">用户注册</h2>

                <!-- 用户名输入 -->
                <div class="mb-3">
                    <label for="username" class="form-label">用户名</label>
                    <input type="text" class="form-control" id="username" name="username" placeholder="请输入用户名"
                           required>
                </div>

                <!-- 邮箱输入 -->
                <div class="mb-3">
                    <label for="email" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="email" name="email" placeholder="请输入邮箱" required>
                </div>

                <div class="mb-3">
                    <label for="verification_code" class="form-label">验证码</label>
                    <div class="input-group">
                        <input type="text" class="form-control" id="code" name="code"
                               placeholder="请输入验证码"
                               required>
                        <button type="button" class="btn btn-secondary" id="send-code-btn">获取验证码</button>
                    </div>
                </div>

                <!-- 密码输入 -->
                <div class="mb-4">
                    <label for="password" class="form-label">密码</label>
                    <input type="password" class="form-control" id="password" name="password" placeholder="请输入密码"
                           required>
                </div>


                <!-- 提交按钮 -->
                <button type="submit" class="btn btn-primary w-100">注册</button>


            </form>
        </div>

    </main>


{% endblock %}